﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
    <!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
</head>
<body>
    <div id="app-1">
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>

    <div id="app-2">
        <blog-post v-for="ps in posts" :key="ps.id" :title="ps.title">

        </blog-post>
       
    </div>

    <div id="app-3" :style="{fontSize:postFontSize+'em'}">
        <blog-post1 v-for="post in posts"
                    v-bind:key="post.id"
                    v-bind:post="post"
                    v-on:enlarge-text="postFontSize+=0.1"></blog-post1>

        <!--通过 $event 访问到被抛出的这个值：

    <blog-post ...
               v-on:enlarge-text="postFontSize += $event"></blog-post>-->
        <!-- 【组件上使用v-model】 -->
        <input v-model="searchText">
        <!--等价于-->
        <input v-bind:value="searchText"
               v-on:input="searchText = $event.target.value">
        <!--用在组件上-->
        <custom-input v-bind:value="searchText"
                      v-on:input="searchText = $event"></custom-input>
        <!-- Script:

        Vue.component('custom-input', {
            props: ['value'],
            template: `
            <input v-bind:value="value"
                   v-on:input="$emit('input', $event.target.value)">
            `
    })-->

        <custom-input v-model="searchText"></custom-input>

        【插槽分发内容-slot】

        <alert-box>
            Something bad happened.
        </alert-box>

        <!--
        Vue.component('alert-box', {
            template: `
            <div class="demo-alert-box">
                <strong>Error!</strong>
                <slot></slot>
            </div>
            `
    })-->
    </div>
    <script>
        Vue.component('button-counter', {
            /*
             * data必须是一个函数-因此每个实例可以维护一份被返回对象的独立的拷贝-
             *
             * 如果 Vue 没有这条规则，
             *
             * 点击一个按钮就可能会像如下代码一样影响到其它
             *
             * 所有实例
             *
             * */
            data: function () {
                return {
                    count:0
                }
            },
            template:'<button v-on:click="count++">You clicked me {{ count }} times.</button>'
        })

        var app1 = new Vue({
            el:'#app-1'
        })

        Vue.component('blog-post', {
            props: ['title'],
            template:'<h3>{{ title }}</h3>'
        })

        var app2 = new Vue({
            el: '#app-2',
            data: {
               posts: [
                    { id: 1, title: 'My journey with Vue' },
                    { id: 2, title: 'Blogging with Vue' },
                    { id: 3, title: 'Why Vue is so fun' }
                ]
            }
        })


        //子组件可以通过调用内建的 $emit 方法 并传入事件名称来触发一个事件：
        Vue.component('blog-post1', {
            props: ['post'],
            template: ` <div class="blog-post">
                            <h3> {{ post.title }}</h3>
                                <button v-on:click="$emit('enlarge-text',0.8)">
                                    放大文本
                                </button>
                            <div v-html="post.content"></div>
                        </div>`              
        })

        var app3 = new Vue({
            el: '#app-3',
            data: {
                posts: [
                    { id: 1, title: 'My journey with Vue',content:'safasdfasdf' },
                    { id: 2, title: 'Blogging with Vue', content: 'safasdfasdf'},
                    { id: 3, title: 'Why Vue is so fun',content: 'safasdfasdf' }
                ],
                postFontSize:1
            }
        })

    </script>
</body>
</html>